<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>网络件监控</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <h1>网络件监控</h1>
      <div class="metrics-container">
        <p>
          <strong>已处理请求总数:</strong> <span id="processedCount">0</span>
        </p>
        <p>
          <strong>成功处理请求数:</strong> <span id="successfulCount">0</span>
        </p>
        <p><strong>失败处理请求数:</strong> <span id="failedCount">0</span></p>
      </div>
      <div class="top-section-container">
        <div class="query-section">
          <div class="query-controls">
            <div class="input-group">
              <label for="queryDate">日期:</label>
              <input type="date" id="queryDate" />
            </div>
            <div class="input-group">
              <label for="queryBh">信访件编号:</label>
              <input type="text" id="queryBh" placeholder="请输入信访件编号" />
            </div>
            <div class="input-group">
              <label for="queryStatus">状态:</label>
              <select id="queryStatus">
                <option value="">全部</option>
                <option value="成功">成功</option>
                <option value="失败">失败</option>
              </select>
            </div>
            <div class="query-buttons">
              <button id="searchBtn">查询</button>
              <button id="resetBtn" class="secondary-btn">重置</button>
            </div>
          </div>
        </div>
      </div>
      <div class="call-list-container">
        <h2>调用列表</h2>
        <table>
          <thead>
            <tr>
              <th>序号</th>
              <th>信访件编号</th>
              <th>开始时间</th>
              <th>状态</th>
              <th>处理时间 (s)</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody id="callListTableBody">
            <!-- Call data will be inserted here -->
          </tbody>
        </table>
        <div class="pagination-controls">
          <label for="itemsPerPage">每页显示:</label>
          <select id="itemsPerPage">
            <option value="5">5</option>
            <option value="10" selected>10</option>
            <option value="20">20</option>
            <option value="50">50</option>
          </select>
          <button id="prevPageBtn" disabled>&lt; 上一页</button>
          <span id="pageInfo">1 / 1</span>
          <button id="nextPageBtn" disabled>下一页 &gt;</button>
        </div>
      </div>
      <div class="charts-section">
        <div class="chart-container">
          <h2>请求队列大小</h2>
          <canvas id="queueSizeChart"></canvas>
        </div>
        <div class="chart-container">
          <h2>平均处理时间 (s)</h2>
          <canvas id="endToEndTimeChart"></canvas>
        </div>
      </div>

      <!-- Detail Modal -->
      <div id="detailModal" class="modal">
        <div class="modal-content">
          <span class="close-button">&times;</span>
          <h3>调用详情</h3>
          <p><strong>信访件编号:</strong> <span id="detailBh"></span></p>
          <p><strong>开始时间:</strong> <span id="detailStartTime"></span></p>
          <p><strong>状态:</strong> <span id="detailStatus"></span></p>
          <p><strong>处理时间:</strong> <span id="detailProcessTime"></span></p>
          <div class="detail-section">
            <h4>请求信息:</h4>
            <pre id="detailRequest"></pre>
          </div>
          <div class="detail-section">
            <h4>响应信息:</h4>
            <pre id="detailResponse"></pre>
          </div>
          <div
            class="detail-section"
            id="detailErrorSection"
            style="display: none"
          >
            <h4>错误信息:</h4>
            <pre id="detailError"></pre>
          </div>
        </div>
      </div>
    </div>
    <script src="./lib/chart.js"></script>
    <script src="script.js"></script>
  </body>
</html>
